<template>
  <div class="RemoteControl">
    <div class="action-bar">
      <div class="bar-right">
        <div class="bar-test">
          <span>控制方式：</span>
          <el-select
            v-model="controlMode"
            clearable
            placeholder="请选择控制方式"
          >
            <el-option label="通信测试设备业务信道" value="1" />
            <el-option label="北斗短消息" value="2" />
          </el-select>
        </div>
      </div>
    </div>
    <div class="tab-div">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="远程登录页面" name="remote-login">
          <div class="tab-pane-div">
            <Login></Login>
          </div>
        </el-tab-pane>
        <el-tab-pane label="通信设备检测" name="communication-devices">
          <div class="tab-pane-div">
            <CommunicationDevices></CommunicationDevices></div
        ></el-tab-pane>
        <el-tab-pane label="软件运行环境检测" name="runtime-environment">
          <div class="tab-pane-div">
            <RuntimeEnvironment></RuntimeEnvironment></div
        ></el-tab-pane>
        <el-tab-pane label="测试任务检测" name="test-task">
          <div class="tab-pane-div">
            <TestTask></TestTask></div
        ></el-tab-pane>
        <el-tab-pane label="任务管理与制度" name="manage-system">
          <div class="tab-pane-div"><ManageSystem></ManageSystem></div
        ></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import CommunicationDevices from "./components/CommunicationDevices.vue";
import RuntimeEnvironment from "./components/RuntimeEnvironment.vue";
import TestTask from "./components/TestTask.vue";
import ManageSystem from "./components/ManageSystem.vue";
import Login from "./components/Login.vue";
export default {
  name: "RemoteControl",
  components: {
    // TaskMe
    CommunicationDevices,
    RuntimeEnvironment,
    TestTask,
    ManageSystem,
    Login,
  },
  props: {},
  data() {
    return { controlMode: "1", activeName: "remote-login" };
  },
  computed: {},
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped>
.RemoteControl {
  padding: 0 1.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  .action-bar {
    height: 4rem;
    background: url("~@/assets/images/taskArrangement/border.png") no-repeat
      center center;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .bar-right {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 1rem;
      padding-left: 20px;
      .bar-test {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 2;
      }
      .bar-search {
        flex: 1;

        :hover {
          color: #1adafb;
        }
        span {
          display: inline-block;
          text-align: center;
          margin-left: 0.625rem;
          width: 5rem;
          height: 2.5rem;
          line-height: 2.5rem;
          background: url("~@/assets/images/taskArrangement/search-button.png")
            no-repeat center center;
          background-size: 100% 100%;
          cursor: pointer;
        }
      }
    }
  }
  .tab-div {
    flex: 1;
    padding: 0 1.25rem;
    .tab-pane-div {
      height: 100%;
    }
  }
  ::v-deep .el-input {
    width: 12.5rem;
  }
}
</style>
